<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="css/zTreeStyle/zTreeStyle.css" />
		<link rel="stylesheet" type="text/css" href="css/demo.css" />
		<script src="https://www.jq22.com/jquery/jquery-1.10.2.js"></script>
		<script src="js/jquery-migrate-1.2.1.js" type="text/javascript"></script>
		<script src="js/jquery.ztree.all-3.5.min.js" type="text/javascript"></script>
		<script src="js/jquery.ztree.exhide-3.5.min.js" type="text/javascript"></script>
		<link rel="stylesheet" href="https://www.jq22.com/jquery/bootstrap-3.3.4.css">
		<script src="https://www.jq22.com/jquery/bootstrap-3.3.4.js"></script>
		<script src="MtrSearchZTree.js" type="text/javascript"></script>
		<!-- 建议不要轻易打开这个文件!!! -->
		<script src="testData.js" type="text/javascript"></script>
	</head>
	<body>
		<div class="row" style="margin: 50px;">
			<div class="col-md-3">
				<ul id="tree" class="ztree"></ul>
			</div>
			<div class="col-md-3">
				<ul id="stree" class="ztree"></ul>
				<button id="loadBig" class="btn btn-success" style="margin: 10px;">加载一万条数据</button>
			</div>
		</div>
	</body>
	<script>
		// zTree 的参数配置，深入使用请参考 API 文档（setting 配置详解）
		var setting = {};
		// zTree 的数据属性，深入使用请参考 API 文档（zTreeNode 节点数据详解）
		var zNodes = [{
				name: "test1",
				open: true,
				children: [{
					name: "test1_1"
				}, {
					name: "test1_2"
				}, {
					name: "test1",
					open: true,
					children: [{
						name: "asdf"
					}, {
						name: "vrsa"
					}]
				}]
			},
			{
				name: "test2",
				open: true,
				children: [{
					name: "test2_1"
				}, {
					name: "test2_2"
				}]
			}
		];
		$(function() {
			$.fn.zTree.init($("#tree"), setting, zNodes);
			new MtrSearchZTree();
			$("#loadBig").on("click", function(e) {
				// console.log(bigdata);
				$.fn.zTree.init($("#stree"), setting, bigdata);
				new MtrSearchZTree("#stree");
			});
		});
	</script>
</html>
